<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #a1{
        width: 100px;
        height: 100px;
        background-color: aqua;
    }
    #denglu{
        width: 200px;
        height: 200px;
        background-color: aquamarine;
    }
    .zhifu{
       background-color: red;
    }
    #a4{
        width: 300px;
        height: 300px;
        text-align: center;
        line-height: 300px;
        background-color: bisque;
    }
    .a6{
        width: 500px;
        height: 30px;
        background-color: aqua;
        margin-bottom: 5px;
    }
    .a6 button{
        float: right;
        background-color: rgb(105, 255, 205);
        color:white;
        
    }
    textarea {
      width: 200px;
      height: 200px;
    }
</style>
<body>
    <div id="app">
        <p>第一题</p>
        <button @mouseover="show=!show" @mouseout="show=!show">显示</button>
        <div id="a1" v-if="show"></div>
        <p>第二题</p>
        <div id="a2">
        <button @click="op=!op">登录</button>
        <div id="denglu" v-if="op">
            <button @click="op=!op">X</button>
        </div>
        </div>
        <p>第三题</p>
       <h1 class="zhifu"></h1>
       <button @click="activeIndex=0" :class="{'zhifu':activeIndex===0}">微信</button>  
	   <button  @click="activeIndex=1" :class="{'zhifu':activeIndex===1}">支付宝</button>  
	   <button @click="activeIndex=2" :class="{'zhifu':activeIndex===2}">银行卡</button>  
       <p>第四题</p>
       <div id="aa4">
       <button @click="active=0" :class="{'xuanxiang':active===0}">按钮一</button>  
	   <button  @click="active=1" :class="{'xuanxiang':active===1}">按钮二</button>  
	   <button @click="active=2" :class="{'xuanxiang':active===2}">按钮三</button> 
       <button @click="active=3" :class="{'xuanxiang':active===3}">按钮四</button> 
       <div id="a4">
       <div class="xuanxiang" v-if="active===0">内容一</div>
       <div class="xuanxiang" v-if="active===1">内容二</div>
       <div class="xuanxiang" v-if="active===2">内容三</div>
       <div class="xuanxiang" v-if="active===3">内容四</div>
       </div> 
    </div>
    <p>第五题</p>
    <select name="" id="" v-model="val">
	
        <option value="1">选择1</option>
        <option value="2">选择2</option>
        <option value="3">选择3</option>
        <option value="4">选择4</option>
    </select>
    <p>第六题</p>
    <div id="a">
        <div class="a6" v-for="(item,index) in list" >
         <span>{{item.va}}</span>
         <button @click="del(index)">删除</button>
        </div>
    </div>
    <input type="text" v-model="va">
    <button @click="add">增加</button>
    <p>第七题</p>
    <input :type="word?'text':'password'" v-model="password" />
    <button @click="toggle">
      {{ word?'√':'×'}}
    </button>
    <p>第八题</p>
    <textarea v-model="text" @input="much">
    </textarea>
    <p v-if="text.length <= total">剩余字数:{{shengyu}}/{{total}}</p>
   

    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref} =Vue;
    createApp({
        setup(){
            let show = ref(false);
            let op=ref(false);
            let activeIndex=ref(0);
            let active=ref(0);
            let val = ref('');
            let list=ref([]);
            let va=ref('');
            let password = ref('');
            let word = ref(false);

        function toggle (){
          word.value =!word.value;
        };
            function add(){
             list.value.push({va:va.value})
             va.value='';
          }
          function del(index){
            list.value.splice(index,1)
          }
          let text = ref('');
          let total = 200;
          let shengyu = ref(total - text.value.length);
          function much() {
           text.value = text.value.slice(0, total);
           shengyu.value = total - text.value.length;
      };
        return{
            show,
            open,
            close,
            op,
            activeIndex,
            active,
            val,
            list,
            va,
            add,
            del,
            password,
            word,
            toggle,
            text,
            shengyu,
            much,
            total
        }
        }
        
    }).mount('#app')
</script>
</html>